<template>
  <div id="app">
    <button @click="getStudents">获取学生信息</button>
    <br>
    <button @click="getCars">获取汽车信息</button>

    <br>

    <!-- 插槽测试 -->
    <SlotTest title="美食">
      <!-- 下面 img 标签如果注释，插槽中的内容就会显示默认内容 -->
      <img src="./assets/logo.png" alt="">
    </SlotTest>
    <!-- 同一个插槽可以使用多次，里面填写内容 -->

    <!-- 带有名字的插槽 -->
    <JuMingSlotTest title="美食——具名插槽">
      <img slot="center" src="./assets/logo.png" alt="">
      <!-- <a slot="footer" href="http://www.baidu.com">更多美食</a> -->
    </JuMingSlotTest>

    <JuMingSlotTest title="美食——具名插槽">
      <!-- 要指定插槽位置 -->
      <ul slot="center">
        <li v-for="(f, index) in foods" :key="index">{{ f }}</li>
      </ul>

      <div slot="footer">
        <a href="http://www.baidu.com">更多美食</a>
        <br>
        <a href="http://www.baidu.com">更多</a>
      </div>
    </JuMingSlotTest>


    <!-- 作用域插槽 -->
    <ZuoYongYuSlotTest title="游戏-作用域插槽">
      <!-- 插槽内的属性值 games 可以在这个模板内使用 -->
      <template scope="{games}">
        <ul>

          <h4 v-for="(g, index) in games" :key="index">{{ g }}</h4>

        </ul>
      </template>
    </ZuoYongYuSlotTest>

  </div>
</template>

<script>
// 引入 axios，  需要 npm install axios
import axios from 'axios'

// 导入测试插槽组件
import SlotTest from './components/SlotTest'
import JuMingSlotTest from './components/JuMingSlotTest'
import ZuoYongYuSlotTest from './components/ZuoYongYuSlotTest'

export default {
  name: 'App',
  components: { SlotTest, JuMingSlotTest, ZuoYongYuSlotTest },
  data() {
    return {
      foods: ['火锅', '烧烤', '小龙虾', '牛排'],
    }
  },
  methods: {
    getStudents() {
      //  请求的是 test_proxy_server 里面的 server1.js 的接口
      // 注意： 项目中的public 目录下不要写 students 命名的文件
      // aBiu 是请求前缀，代理接口使用的，配合vue.config.js 文件查看
      // 请求的是8080端口，在 vue.config.js 文件中配置的代理，请求的是5000端口
      axios.get('http://localhost:8080/aBiu/students').then(
        response => {
          console.log('请求成功了', response.data);
        },
        error => {
          console.log('请求失败：', error.message);
        }
      )
    },
    getCars() {
      axios.get('http://localhost:8080/aaaaaa/cars').then(
        response => {
          console.log('请求成功了', response.data);
        },
        error => {
          console.log('请求失败：', error.message);
        }
      )
    }
  }
}
</script>
